<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .box{
            width: 1000px;
            height: 460px;
            position: relative;
        }
        .box-img{
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;/* opacity: 1; 删除这个 */
        }
        .box-img:nth-child(1){
            opacity: 1; /* opacity: 1; 删除这个 */
        }
        .box-left{
            position: absolute;
            width: 35px;
            height: 70px;
            /* background: color #000;  */
            color: #ccc;
            top: 195px;
            border-radius:0 5px 5px 0;
            text-align: center;
            line-height: 70px;
            font-size: 27px;
        }
        .box-left:hover{
            background: color #000; ;
        color: #fff;
        }
        .box-right{
            position: absolute;
            width: 35px;
            height: 70px;
            /* background: color #000;  */
            color: #ccc;
            top: 195px;
            border-radius:0 5px 5px 0;
            text-align: center;
            line-height: 70px;
            font-size: 27px;
            right: 0;
        }
        .box-right:hover{
            background: color #000; ;
        color: #fff;
        }
        .box-zhiding>ul{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .box-zhiding li{
            width: 14px;
            height: 14px;
            border: radius 100%; ;
            background-color: #ccc;
            float: left;
            margin-right: 10px;
        }
        .box-zhiding li:hover{
            background-color: #fff;
        }
        .box-zhiding{
          position: absolute;
          bottom: 30px;
          right: 100px;
        }
    </style>
</head>
<body>
  <div class="box">
    <div class="box-img"><img src="img/IP-C (1).jpg" width="1000" height="460"></div>
    <div class="box-img"><img src="img/IP-C (2).jpg" width="1000" height="460"></div>
    <div class="box-img"><img src="img/IP-C (3).jpg" width="1000" height="460"></div>
    <div class="box-img"><img src="img/IP-C (1).jpg" width="1000" height="460"></div>
    <div class="box-img"><img src="img/IP-C (2).jpg" width="1000" height="460"></div>
    <div class="box-img"><img src="img/IP-C (3).jpg" width="1000" height="460"></div>
    <div class="box-img"><img src="img/IP-C (1).jpg" width="1000" height="460"></div>
    <div class="box-img"><img src="img/IP-C (2).jpg" width="1000" height="460"></div>
    <div class="box-left">&lt</div>
    <div class="box-right">&gt</div>
    <div class="box-zhiding">
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>I
</ul>
    </div>
  </div>
  <script type="text/javascript" src="jquery-3.4.1.min.js">
    $(function(){
        var index=0;
        serInteval(function(){
            if(index==5){
                index=0;
                $(".box-img").css("opacity","0");
            $(".box-img").eq(index).css("opacity","1");
            }else{
                index++;
                $(".box-img").css("opacity","0");
            $(".box-img").eq(index).css("opacity","1");
            }
            
        },2000)
    })
  </script>
  
</body>
</html>